<template>  
  <div>  
    <h2>查询示例</h2>  
    <form @submit.prevent="handleQuery">  
      <label for="query-input">查询条件:</label>  
      <input type="text" id="query-input" v-model="query" placeholder="输入查询条件">  
      <button type="submit">查询</button>  
    </form>  
    <ul v-if="results.length">  
      <li v-for="result in results" :key="result.id">  
        {{ result.name }}  
      </li>  
    </ul>  
    <p v-else>没有查询结果。</p>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      query: '', // 查询条件  
      results: [], // 查询结果  
      // 假设这是从API获取数据的模拟数据  
      mockData: [  
        { id: 1, name: 'Alice' },  
        { id: 2, name: 'Bob' },  
        { id: 3, name: 'Charlie' },  
        // ... 更多数据  
      ],  
    };  
  },  
  methods: {  
    handleQuery() {  
      // 清空之前的结果  
      this.results = [];  
      // 模拟查询逻辑  
      const queryLowerCase = this.query.toLowerCase();  
      this.mockData.forEach(item => {  
        if (item.name.toLowerCase().includes(queryLowerCase)) {  
          this.results.push(item);  
        }  
      });  
    },  
  },  
};  
</script>